import { ConfigService } from './config.service';
import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { FileUploader, FileItem } from 'ng2-file-upload';
@Component({
  selector: 'ncloud-upload',
  template: `
      <div class="col-md-3">
        <div class="panel">
          <div class="panel-body">
            <h4 class="page-header mt0">上传附件</h4>
            <div ng2FileDrop [ngClass]="{'nv-file-over': hasBaseDropZoneOver}" (fileOver)="fileOverBase($event)" 
              [uploader]="uploader" class="box-placeholder my-drop-zone">拖拽文件到这里</div>
            <label for="file2" class="file-upload">
              <button class="btn btn-default btn-block">点击选择文件</button> 
              <input id="file2" type="file" ng2FileSelect [uploader]="uploader" />
            </label>
          </div>
        </div>
      </div>
      <div class="col-md-9" style="margin-bottom: 40px">
        <div class="panel">
          <div class="panel-body">
            <p class="pull-right label label-info ng-binding ng-scope" *ngIf="uploader?.queue?.length">
              Queue length: {{ uploader?.queue?.length }}
            </p>
            <h4 class="page-header mt0">文件队列</h4>
            <table class="table">
              <thead>
                <tr>
                  <th width="50%">文件名</th>
                  <th>大小</th>
                  <th>进度</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of uploader.queue">
                  <td><strong>{{ item?.file?.name }}</strong></td>
                  <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                  <td *ngIf="uploader.isHTML5">
                    <div class="progress" style="margin-bottom: 0;">
                      <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                    </div>
                  </td>
                  <td class="text-center">
                    <span *ngIf="item.isSuccess">
                      <i class="fa fa-ok"></i>
                    </span> 
                    <span *ngIf="item.isCancel"> 
                      <i class="icon-close mr"></i>
                    </span> 
                    <span *ngIf="item.isError"> 
                      <i class="fa fa-remove"></i>
                    </span>
                  </td>
                  <td nowrap>
                    <button type="button" class="btn btn-info btn-xs" (click)="itemUpload(item)"
                      [disabled]="item.isReady || item.isUploading || item.isSuccess">
                      <span class="fa icon-cloud-upload mr"></span> 上传
                    </button>
                    <button type="button" class="btn btn-warning btn-xs" (click)="item.cancel()" 
                      [disabled]="!item.isUploading">
                      <span class="icon-close mr"></span> 取消
                    </button>
                    <button type="button" class="btn btn-danger btn-xs" (click)="item.remove()">
                      <span class="icon-trash mr"></span> 删除
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="panel">
          <div class="panel-body">
            <div>
              <div>
                进度条:
                <div class="progress" style="">
                  <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
                </div>
              </div>
              <button type="button" class="btn btn-info btn-s" (click)="uploadAll()"
                [disabled]="!uploader.getNotUploadedItems().length">
                <span class="fa icon-cloud-upload mr"></span> 全部上传
              </button>
              <button type="button" class="btn btn-warning btn-s" (click)="uploader.cancelAll()"
                [disabled]="!uploader.isUploading">
                <span class="icon-close mr"></span> 全部取消
              </button>
              <button type="button" class="btn btn-danger btn-s" (click)="uploader.clearQueue()"
                [disabled]="!uploader.queue.length">
                <span class="icon-trash mr"></span> 全部删除
              </button>
            </div>
          </div>
        </div>
      </div>
  `,
})
export class UploadComponent implements OnInit {
  public currentContract: any = {};
  private uploadUrl: any;
  public uploader: FileUploader;
  public hasBaseDropZoneOver = false;
  public hasAnotherDropZoneOver = false;
  @Output() public uploaded: EventEmitter<any> = new EventEmitter();
  public fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;
  }
  public fileOverAnother(e: any): void {
    this.hasAnotherDropZoneOver = e;
  }
  constructor(private config: ConfigService) {
    this.uploadUrl = this.config.get('upload');
    this.uploader = new FileUploader({ url: this.uploadUrl });
  }
  ngOnInit() {
  }
  itemUpload(item): void {
    item.upload();
    item.onSuccess = (response: string, status: number, headers: any) => {
      const result = JSON.parse(response);
      if (result.code !== '0000') {
        this.uploader.removeFromQueue(item);
        alert(result.message);
      } else {
        this.uploaded.emit(result);
      }
    };
  }
  uploadAll(): void {
    this.uploader.queue.forEach((i: FileItem) => {
      this.itemUpload(i);
    });
  }
}
